<template>
  <div class="login">
    <div class="header">
      <img src="../assets/logo/Logo.png" 
            style="width: 150px; height: 100px"
      alt="">
      <!-- <el-image
      style="width: 200px; height: 100px"
       src=require(../assets/logo/Logo.png)
      fit="contain"></el-image> -->
    </div>
    <div class="loginFrom">
        <h2 class="welcome">欢迎登录知聊</h2>
      <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" class="loginFormBox">
        <el-form-item prop="email">
          <!-- <el-input type="text" v-model="loginForm.userName" autocomplete="off"></el-input> -->
          <el-input  placeholder="请输入邮箱账号" type="email" v-model="loginForm.email"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
          <!-- <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item>
           <el-link :underline="false"  type="info">
             <router-link to="/getPass" exact>忘记密码？</router-link>
             </el-link>
           <el-link :underline="false">
             <router-link to="/register" exact style="color: rgb(14, 156, 238)">
             快速注册
             </router-link>
             </el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" class="submit">登录</el-button>
        </el-form-item>
        
        <el-form-item>
          
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <p>知聊交流社区，本站点仅学习用于个人使用，用户数据都会经过加密处理</p>
      <p> 会保护所有用户的隐私数据，由于个人资金技术水平有限，会定期清除数据，请放心使用。</p>
    </div>
  </div>
</template>

<script>
export default {
   data() {
      return {
        loginForm: {
          email: '',
          password: '',
          "[[${_csrf.parameterName}]]": "[[${_csrf.token}]]"
        },
        loginRules: {
            email: [
                   { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                   { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
            password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
                ],
        }
      };
    },
    methods: {
      submitForm() {
         this.$refs.loginForm.validate(async valid => {
        if(!valid) return;
        if (''!=this.password && ''!=this.email) {
          // console.log(this.loginForm);
          // 向服务器请求数据
          const {data:res} = await this.$axios.post("user/login.do",this.loginForm)//访问后台s
          
          // console.log('返回值：'+res.user.email);
          
          if(res.status=='success'){
            this.$message.success("登录成功！即将转到主页。");
            // sessionStorage.put()           
            window.sessionStorage.setItem("user",res.user.email);
            window.sessionStorage.setItem("flag",res.status);
            window.sessionStorage.setItem("avatorUrl",res.user.avatorUrl);
            this.$router.push({path:"/home"});
          }
          if(res=='userError'){
            this.$message.error("用户不存在！请重试");
            this.$router.push({path:"/login"});
            return false;  
          }
          if(res=='passError'){
            this.$message.error("密码错误！请重试。");
            return false;  
          }
        } else {
          this.$message.error("登录失败！请输入个人信息。");
          return false;
        }
      });
      },
    }
}
</script>

<style lang="less">
.login{
  position: relative;
  background: url("../assets/image/loginBack.png") no-repeat ;
  background-position:center ;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.header{
  // background-color: rgb(14, 156, 238);
  height: 15%;
  width: 100%;
  position: absolute;
  top: 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // justify-content: space-between;
}
.welcome{
  width: 100%;
  text-align: center;
  margin-top: 5%;
  color: rgb(5, 176, 255);
}
.loginFrom{
  // background-color: rgb(255, 172, 158);
  background-color: white;
  border: 3px solid rgb(240, 238, 238);
  border-radius: 1%;
  height: 70%;
  width: 30%;
  position: absolute;
  transform: translate(-50%,50%);
  left: 50%;
  top: -20%;
  .loginFormBox{
    // background-color: yellowgreen;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top:10%;
    .el-form-item{
      // width: 95%;
      margin-bottom: 3rem;
         .el-input__inner{
          border: none;
          border-bottom: 1px solid gray;
          outline: none;
      }
    }
    .submit{
      width: 100%;
      }
  }
}

.footer{
  // background-color: yellowgreen;
  height: 10%;
  width: 100%;
  position: absolute;
  bottom: 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // justify-content: space-between;
}
</style>